<template>
    <div
        class="g-dialog-container"
        v-loading="loading"
        element-loading-text="加载中"
        element-loading-spinner="el-icon-loading"
    >
        <div class="g-dialog-content">
            <el-form
                size="mini"
                label-suffix="："
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="150px"
                class="demo-ruleForm"
            >
                <el-form-item label="标签名称" prop="name">
                    <el-input
                        show-word-limit
                        maxlength="20"
                        placeholder="请输入"
                        size="mini"
                        v-model="ruleForm.name"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="标签编号" prop="number">
                    <el-input
                        show-word-limit
                        maxlength="20"
                        placeholder="请输入"
                        size="mini"
                        v-model="ruleForm.number"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="标签图标" prop="colour">
                    <el-select v-model="ruleForm.colour" placeholder="请选择" size="mini" clearable>
                        <el-option
                            v-for="item in imageOptions"
                            :label="item.name"
                            :value="item.id"
                            :key="item.id"
                        >
                        <el-image style="width: 50px;float: left" :src="item.id"></el-image>
                        <span style="float: right">{{item.name}}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="硬件ID" prop="locationId">
                    <el-input
                        show-word-limit
                        maxlength="20"
                        placeholder="请输入"
                        size="mini"
                        v-model="ruleForm.locationId"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="资产/员工" prop="employId">
                    <el-select v-model="ruleForm.employId" placeholder="请选择" size="mini" clearable>
                        <el-option
                            v-for="item in personelOptions"
                            :label="item.name"
                            :value="item.id"
                            :key="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="g-dialog-footer">
            <el-button type="primary" size="mini" icon="el-icon-circle-check" @click="handleSave">保存</el-button>
            <el-button
                type="primary"
                size="mini"
                icon="el-icon-circle-close"
                @click="handleCancel"
            >取消</el-button>
        </div>
    </div>
</template>
<script>
// api
import { addTag, getTag, updateTag } from '@/api/tag'
import { getTagEmploy } from '@/api/common'

export default {
    props: {
        // 人员id
        currentItem: Object
    },
    data() {
        return {
            loading: false,
            personelOptions: [],
            imageOptions: config.IMAGE_LIST,
            ruleForm: {
                id: null,
                name: '',
                number: '',
                colour: '',
                employId: '',
                locationId: ''
            },
            rules: {
                name: [{ required: true, trigger: 'blur', message: '标签名称不能为空' }],
                number: [{ required: true, trigger: 'blur', message: '标签编号不能为空' }],
                colour: [{ required: true, trigger: 'blur', message: '标签颜色不能为空' }]
            }
        }
    },
    created() {
        if (this.currentItem) {
            for (let key in this.ruleForm) {
                this.ruleForm[key] = this.currentItem[key]
            }
        }
       
        // 查看未绑定标签的人员
        getTagEmploy('tagEmploy', this.currentItem.id).then((res) => {
            if (res.status !== 200) return this.$msgPrompt.error(res.msg)
            this.personelOptions = [...this.personelOptions, ...res.obj]
        })
        // 查看未绑定标签的资产
        getTagEmploy('tagAssets', this.currentItem.id).then((res) => {
            if (res.status !== 200) return this.$msgPrompt.error(res.msg)
            this.personelOptions =  [...this.personelOptions, ...res.obj]
        })

    },
    methods: {
        getData() {
            this.loading = true
            getTag(this.currentItem.id).then((res) => {
                this.loading = false
                if (res.status !== 200) return this.$msgPrompt.error(res.msg)
                
            })
        },
        //保存
        handleSave() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.$startLoading()
                    this.currentItem ? this.update() : this.add()
                } else {
                    return false
                }
            })
        },
        //添加
        add() {
            addTag(this.ruleForm).then((res) => {
                this.$endLoading()
                if (res.status != 200) return this.$msgPrompt.error(res.msg)
                this.$msgPrompt.success()
                this.$emit('succeed')
            })
        },
        //修改
        update() {
            updateTag(this.ruleForm).then((res) => {
                this.$endLoading()
                if (res.status != 200) return this.$msgPrompt.error(res.msg)
                this.$msgPrompt.success()
                this.$emit('succeed')
            })
        },
        //取消
        handleCancel() {
            this.$emit('close')
        }
    }
}
</script>
<style scoped lang='scss'>
.g-dialog-container {
    position: relative;
    width: 100%;
    height: 100%;

    .el-form {
        margin-top: 20px;
    }

    .shade-text {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .el-checkbox-group {
        display: flex;
        flex-display: row;
        flex-wrap: wrap;

        .el-checkbox {
            min-width: 100px;
        }
    }

    .el-input,
    .el-select {
        width: 230px;
    }

    .el-textarea {
        width: 562px;
    }
}
</style>
